<template>
	<view>
		<view class="a1">
			<view class="a2">
				<span class="search_icon">&#xe651;</span>
				<input class="input_serach" placeholder="从哪里发物品" selection-start="10" placeholder-class="input_place"
					type="text" confirm-type="搜索" @confirm="searchAddress" v-model="searchText" />
				<view class="close" v-if="searchdata" @click="close">&#xeaf2;</view>
			</view>
			<view class="a3">青岛市</view>
		</view>
		<view v-if="searchdata">
			<view v-for="(item,index) in searchdata" :key="index">
				<view class="a8" @click="handleSearch(item)">
					<view class="a9">{{item.name}}</view>
					<view class="b1">{{item.pname}}{{item.cityname}}{{item.adname}}{{item.address}}</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<view v-else>
			<zzx-tabs :items="items" :current="current" @clickItem="handleTab" ref="mytabs" :lineWidth="width_tabs">
			</zzx-tabs>
			<view v-if="current==0" class="a4">
				<map id='mmap' :markers="map_mark" @poitap="handlePOITap" :latitude="centerLat"
					:longitude="centerLon"></map>
				<view class="a5" v-if="chooseAddress">
					<view class="a6">{{chooseAddress}}</view>
					<view class="a7">当前位置</view>
				</view>
				<view class="line"></view>
				<view v-for="(item,index) in POIdata" :key="index">
					<view class="a8" @click="handleSearch(item)">
						<view class="a9">{{item.name}}</view>
						<view class="b1">{{item.pname}}{{item.cityname}}{{item.adname}}{{item.address}}</view>
					</view>
					<view class="line"></view>
				</view>
			</view>
			<view v-if="current==1">
				<view v-for="(item,index) in addressList" :key="index">
					<view class="b2">
						<view class="b3" @click="handleUsed(item)">
							<view class="b4">{{item.addressDetails}}</view>
							<view class="b5">{{item.phone}}</view>
						</view>
						<view @click="handleLike(item)">
							<span :class="item.collection==0?'collention_icon':'collention_icon_like'">&#xe86d;</span>
						</view>
					</view>
					<view class="b6"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				width_tabs: '10%',
				current: 1,
				items: ['附近的点', '常用地址'],
				key: '82421d28c27c16f380dacf07af12481f',
				map_mark: [{
					id: 1,
					latitude: 36.012905,
					longitude: 120.140514,
				}],
				centerLat: '36.012905',
				centerLon: '120.140514',
				//周边数据
				POIdata: '',
				chooseAddress: '',
				//查询数据
				searchdata: '',
				searchText: '',
				//地址列表
				addressList: [],
				//由哪个页面跳转过来的标记（0：address-选择地址按钮 1：index-常用按钮）
				pageType: 0,
			}
		},
		onLoad(options) {
			var that = this;
			that.pageType = options.pageType;
			var userId = uni.getStorageSync('userId');
			//查询地址列表
			that.getAddressList(userId);
		},
		methods: {
			//tab切换
			handleTab(e) {
				var that = this;
				this.current = e.currentIndex;
				if (e.currentIndex == 0) {
					that.searchPOI()
				}
			},
			//周边搜索
			searchPOI() {
				var that = this;
				uni.request({
					url: 'https://restapi.amap.com/v3/place/around?key=' + that.key + '&location=' + that
						.centerLon + ',' + that.centerLat + '&radius=10000',
					method: 'GET',
					success: function(res) {
						that.POIdata = res.data.pois;
					}
				})
			},
			//地图选点
			handlePOITap(e) {
				var that = this;
				var lat = e.detail.latitude;
				var lon = e.detail.longitude;
				that.chooseAddress = e.detail.name;
				//更换标记点
				that.map_mark[0].latitude = lat;
				that.map_mark[0].longitude = lon;
				//更换中心点
				that.centerLat = lat;
				that.centerLon = lon;
				//调用周边搜索
				that.searchPOI();
			},
			//查询地点
			searchAddress(e) {
				var that = this;
				var value = e.detail.value;
				console.log(value)
				uni.request({
					url: 'https://restapi.amap.com/v3/place/text?keywords=' + value +
						'&output=JSON&offset=20&page=1&key=' + that.key + '&extensions=all&city=青岛',
					method: 'GET',
					success: function(res) {
						that.searchdata = res.data.pois;
					}
				})
			},
			//关闭搜索列表
			close() {
				this.searchdata = ''
				this.searchText = ''
			},
			//选择搜索后的地址
			handleSearch(item) {
				var that = this;
				var address = item.pname + item.cityname + item.adname + item.address + item.name;
				var location = item.location;
				//由选择地址页跳转 返回添加地址页
				if (that.pageType == 0) {
					console.log("新增地址")
					uni.$emit("takeAddress", address);
					uni.$emit("takeLocation", location);
					uni.navigateBack({
						delta: 1
					})
				} else if (that.pageType == 1) {
					console.log("常用地址")
					//由常用页跳转 跳转至新增地址页
					uni.navigateTo({
						url: '../createTakeAddress/createTakeAddress?address=' + address + '&&location=' + location+'&&method=0'
					})
				}else if(that.pageType==3){
					console.log("订单页常用按钮")
					//由订单页常用按钮跳转
					uni.navigateTo({
						url: '../createTakeAddress/createTakeAddress?address=' + address + '&&location=' + location+'&&method=3'
					})
				}
			},
			//查询地址列表
			getAddressList(userId) {
				var that = this;
				that.http.sendRequest("/flashCloud/oftenAddress/list", 'get', {
					userId: userId
				}).then(function(res) {
					that.addressList = res.rows;
				})
			},
			//选择常用地址
			handleUsed(item) {
				var that=this;
				uni.$emit("takeAddressReplenish", item.addressReplenish);
				uni.setStorageSync('takeAddressId',item.addressId);
				//pageType 3 由订单页常用按钮跳转而来  0 1页常用按钮跳转而来
				if(that.pageType==3){
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.switchTab({
						url: '../../index/index'
					})
				}
			},
			//收藏
			handleLike(item) {
				var that = this;
				that.http.sendRequest("/flashCloud/oftenAddress/CollectionOF", "PUT", {
					collection: item.collection == 0 ? 1 : 0,
					oftenAddressId: item.oftenAddressId
				}).then(function(res) {
					if (res.code == 200) {
						that.getAddressList(uni.getStorageSync('userId'))
					} else {
						uni.showToast({
							title: '系统错误' + res.code,
							icon: 'error'
						})
					}
				})
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 2819500 */
		src: url('https://at.alicdn.com/t/font_2819500_gneu0h1xa3.woff2?t=1637826235979') format('woff2'),
			url('https://at.alicdn.com/t/font_2819500_gneu0h1xa3.woff?t=1637826235979') format('woff'),
			url('https://at.alicdn.com/t/font_2819500_gneu0h1xa3.ttf?t=1637826235979') format('truetype');
	}

	.collention_icon {
		font-family: "iconfont";
		color: #C0C0C0;
	}

	.collention_icon_like {
		font-family: "iconfont";
		color: #F37600;
	}

	.search_icon {
		font-family: "iconfont";
		position: absolute;
		margin: 12upx;
	}

	.close {
		font-family: "iconfont";
		position: absolute;
		right: 160upx;
		top: 45upx;
		z-index: 999;
	}

	#mmap {
		width: 100%;
		height: 450upx
	}

	.input_serach {
		background-color: #F2F2F2;
		height: 60upx;
		line-height: 60upx;
		font-size: 24upx;
		padding-left: 60upx;
	}

	.input_place {
		font-size: 24upx;
		padding-left: 30upx;
	}

	.a1 {
		display: flex;
		flex-direction: row;
		padding-left: 30upx;
		padding-right: 30upx;
		width: 100%;
		margin-top: 30upx;
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.a2 {
		width: 80%;
	}

	.a3 {
		font-size: 26upx;
		width: 20%;
		text-align: center;
		height: 60upx;
		line-height: 60upx;
		padding-right: 30upx;
	}

	.a4 {
		margin-top: 30upx;
	}

	.line {
		background-color: #F1F1F1;
		height: 1upx;
	}

	.a5 {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30upx;
		padding-right: 30upx;
		font-size: 28upx;
		height: 100upx;
		line-height: 100upx;
	}

	.a6 {
		margin-right: 10upx;
	}

	.a7 {
		width: 100upx;
		height: 30upx;
		line-height: 30upx;
		font-size: 18upx;
		text-align: center;
		background-color: #F6F6F4;
		color: #9C9C9C;
	}

	.a8 {
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.a9 {
		font-size: 28upx;
		margin-top: 30upx;
	}

	.b1 {
		font-size: 24upx;
		color: #C0C0C0;
		margin-bottom: 30upx;
		margin-top: 10upx;
	}

	.b2 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30upx 60upx 30upx 60upx;
		align-items: center;
	}

	.b3 {
		display: flex;
		flex-direction: column;
	}

	.b4 {
		font-size: 28upx;
	}

	.b5 {
		font-size: 24upx;
		color: #999999;
		margin-top: 10upx;
	}

	.b6 {
		height: 1upx;
		background-color: #F1F1F1;
	}
</style>
